<template>
  <div>
    <div style="margin-top: 15px;">
      <el-row style="background-color: white;">
        <el-col :span="2">
          <el-button type="primary" @click="dialogVisible2=true">新增项目</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="请输入项目id或项目名" v-model="projectKey">
            <el-button slot="append" icon="el-icon-search" @click="findProjectByKey"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>



    <template>
      <el-table :data="Projects" border style="width: 100%">
        <el-table-column prop="projectId" label="项目编号">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人">
        </el-table-column>
        <el-table-column prop="projectIntro" label="项目介绍">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="modifyTime" label="修改时间">
        </el-table-column>
        <el-table-column prop="projectState" label="项目状态">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" type=index>
            <el-button @click="chanmenmber(scope.row)" type="text" size="small">成员管理</el-button>
            <el-button @click="openDialog(scope.row)" type="text" size="small">修改项目</el-button>
            <span v-if="scope.row.projectState=='有效'">
              <el-button @click="closeProject(scope.row)" type="text" size="small">关闭</el-button>
            </span>
            <span v-else>
              <el-button @click="openProject(scope.row)" type="text" size="small">启用</el-button>
            </span>

          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="修改项目" :visible.sync="dialogVisible" width="30%" :close="closeDialog">
      <el-form :model="tempProject" ref="tempProject" label-width="100px" class="demo-ruleForm">
        <el-form-item label="项目编号">
          <el-input type="text" v-model="tempProject.projectId" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="项目名">
          <el-input type="text" v-model="tempProject.projectName" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input type="textarea" v-model="tempProject.projectIntro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitForm('tempProject')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="新增项目" :visible.sync="dialogVisible2" width="30%" :close="closeDialog2">
      <el-form :model="tempProject2" ref="tempProject2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="项目名">
          <el-input type="text" v-model="tempProject2.projectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input type="textarea" v-model="tempProject2.projectIntro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible2=false">取消</el-button>
          <el-button type="primary" @click="submitForm2('tempProject2')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>




    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageinfo.current" :page-sizes="[2, 4, 8, 16]" :page-size="pageinfo.size"
      layout="total, sizes, prev, pager, next, jumper" :total="pageinfo.total">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        projectKey: "",
        dialogVisible2: false,
        //新增用户用户对象
        tempProject2: {
          "projectId": 1,
          "projectName": "string",
          "projectIntro": "string",
          "projectDesc": "string",
          "projectState": "关闭",
          "createBy": "string",
          "createTime": null,
          "modifyBy": null,
          "modifyTime": null
        },
        //
        username: "",
        //临时用户用户弹窗渲染
        tempProject: "",
        //打开编辑用户弹框
        dialogVisible: false,
        //session中的用户
        user: "",
        //分页得到的Projects
        Projects: [{
          "projectId": 1,
          "projectName": "string",
          "projectIntro": "string",
          "projectDesc": "string",
          "projectState": "关闭",
          "createBy": "string",
          "createTime": null,
          "modifyBy": null,
          "modifyTime": null
        }],
        //分页信息
        pageinfo: {
          "records": [],
          "total": 0,
          "size": 0,
          "current": 0,
          "pages": 0
        }
      }
    },
    methods: {
      closeProject(tProject) {

        this.$http.post("infoIssueProject/closeproject", {
          "projectId": tProject.projectId
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.pageProject(this.pageinfo.current, this.pageinfo.size, this.projectKey)
          } else {
            this.$message.error(resp.data.msg);
          }
        })
      },
      openProject(tProject) {
        this.$http.put("infoIssueProject/openproject", {
          "projectId": tProject.projectId
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.pageProject(this.pageinfo.current, this.pageinfo.size, this.projectKey)
          } else {
            this.$message.error(resp.data.msg);
          }
        })
      },
      chanmenmber(tproject) {
        if (tproject.projectState == '关闭') {
          alert("项目处于关闭中不可打开项目");
        } else {
          sessionStorage.setItem("pid", tproject.projectId);
          this.$router.push("/membervue");
        }
      },
      submitForm2() {
        this.tempProject2.createBy = this.user.username;
        this.$http.post("infoIssueProject/newproject", this.tempProject2).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg)
            this.dialogVisible2 = false;
            this.pageProject(this.pageinfo.current, this.pageinfo.size, this.projectKey)
          } else {
            this.$message.error(resp.data.msg)
            this.tempProject2 = "";
          }
        })

      },
      closeDialog2() {
        this.tempProject2 = "";
      },
      findProjectByKey() {
        this.pageProject(this.pageinfo.current, this.pageinfo.size, this.projectKey)
      },

      //提交修改信息
      handleSizeChange(val) {
        this.pageProject(this.pageinfo.current, val, this.projectKey)
      },
      handleCurrentChange(val) {
        this.pageProject(val, this.pageinfo.size, this.projectKey)
      },
      submitForm() {
        this.tempProject.modifyBy = this.user.username;
        this.$http.put("infoIssueProject/changeproject", this.tempProject).then(resp => {
          if (resp.data.code = 200) {
            this.$message.success(resp.data.msg);
          } else {
            this.$message.error(resp.data.msg);
          }
        })
        this.dialogVisible = false;
        this.pageProject(this.pageinfo.current, this.pageinfo.size, this.projectKey)
        location.reload();
      },
      closeDialog() {
        this.tempProject = "";
      },
      //打开弹窗
      openDialog(project) {
        if (project.projectState == '关闭') {
          alert("项目处于关闭中不可打开项目");
        } else {
          this.dialogVisible = true;
          this.tempProject = JSON.parse(JSON.stringify(user));
        }

      },
      loaduser() {
        this.user = JSON.parse(localStorage.getItem("com.woniu.loginUser"));
      },
      pageProject(pIndex, pSize, projectKey) {
        this.$http.get("infoIssueProject/getProjectPage", {
          params: {
            "pageIndex": pIndex,
            "pageSize": pSize,
            "projectKey": projectKey
          }
        }).then(resp => {
          this.pageinfo = resp.data.data;
          this.Projects = resp.data.data.records;
        })
      }
    },
    created() {
      this.loaduser();
      this.pageProject(1, 10)
    }
  }
</script>

<style>
</style>
